<!--
 * @Author: mia.chen mia.chen@webpowerchina.com
 * @Date: 2024-01-18 11:00:01
 * @LastEditors: mia.chen mia.chen@webpowerchina.com
 * @LastEditTime: 2024-01-18 16:00:19
 * @FilePath: \learn-project\src\views\waterfallFlow\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="waterfall">
    <el-form class="queryRef" :inline="true">
         <el-form-item label="用户id" prop="dictLabel">
            <el-input
               placeholder="请输入用户id"
               clearable
               style="width: 200px"
            />
         </el-form-item>
         <el-form-item label="用户名称" style="width: 308px;">
             <el-input
                     placeholder="请输入用户名称"
                     clearable
                     style="width: 200px"
             />
          </el-form-item>
         <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button >重置</el-button>
         </el-form-item>
      </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="number" label="用户id" width="180" />
      <el-table-column prop="name" label="用户姓名" width="180" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="time" label="出生年月" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="state" label="用户状态" />
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button link type="primary">恢复</el-button>
                <el-button link type="primary" @click="dialogVisible = true">权限</el-button>
                <el-dialog
                        v-model="dialogVisible"
                        width="950"
                        :before-close="handleClose"
                >
                    <img style="width: 900px; height: 400px" src="../../assets/quanxian.jpg"/>
                </el-dialog>
            </template>
        </el-table-column>
    </el-table>
      <el-pagination
              :page-size="20"
              :pager-count="10"
              layout="prev, pager, next"
              :total="100"
      />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const tableData = ref([
  {
    number: '10125',
    name: '李溯',
    sex: '男',
      time: '2000-01-22',
      phone: '15274415696',
      state: '删除'
  },
  {
    number: '12496',
    name: '王思',
    sex: '女',
      time: '1996-05-16',
      phone: '13265986539',
      state: '删除'
  },
    {
        number: '12596',
        name: '赵蕈',
        sex: '女',
        time: '1994-07-16',
        phone: '13265986339',
        state: '删除'
    },
    {
        number: '16496',
        name: '杨欢欢',
        sex: '女',
        time: '1996-05-22',
        phone: '13265932519',
        state: '删除'
    },
    {
        number: '42266',
        name: '朱桓',
        sex: '男',
        time: '1992-05-16',
        phone: '15565986443',
        state: '删除'
    },
    {
        number: '12496',
        name: '杨晨晨',
        sex: '男',
        time: '2000-04-22',
        phone: '13265986099',
        state: '删除'
    },
    {
        number: '12496',
        name: '朱江',
        sex: '男',
        time: '1993-01-12',
        phone: '13265984421',
        state: '删除'
    },
    {
        number: '12496',
        name: '张力',
        sex: '女',
        time: '1996-11-16',
        phone: '13265986322',
        state: '删除'
    },
    {
        number: '12496',
        name: '朱静',
        sex: '女',
        time: '1996-05-16',
        phone: '13265986322',
        state: '删除'
    },
    {
        number: '12496',
        name: '王肯',
        sex: '男',
        time: '1996-05-16',
        phone: '15265986551',
        state: '删除'
    },
])
// function syy(index){
//     console.log(index)
//     tableData.value[index].state = "恢复"
// }
const dialogVisible = ref(false)
</script>

<style scoped>
.queryRef{
  margin:10px;
}
</style>
